<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #box1
    {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    </style>

    <script type="text/javascript">
    window.onload=function()
    {
        

        //获取id为box1的div
        var box1=document.getElementById("box1");

        //为box1绑定一个鼠标滚轮滚动的事件onmousewheel
        //火狐只支持DOMMouseScroll事件
        box1.onmousewheel=function(event)
        {
            //当鼠标滚轮向下滚动时，box1变长
            //当滚轮向上滚动时，box1变短
            //console.log("滚了");
            
            //判断鼠标滚轮滚动的方向
            //event.wheelDelta 可以获取鼠标滚轮滚动的方向向上滚是120，向下滚是-120
            //wheelDelta这个值我们不看大小，只看正负
            //console.log(event.wheelDelta);
            if(event.wheelDelta >0)
            {
                //向上滚,box1变短
                //console.log("向上滚");
                box1.style.height=box1.clientHeight-10+"px";
            }
            else
            {
                //向下滚,box2变长
                //console.log("向下滚");
                box1.style.height=box1.clientHeight+10+"px";
            }

            //当滚轮滚动时，如果浏览器有滚动条，那么就会随着滚动条滚动
            //这是浏览器的默认行为，如果不希望发生，则可以取消该行为
            return false;//但此时不能把鼠标滚轮绑定在document上
        };
        //另一种方法
        /*
        box1.addEventListener("mousewheel",function()
        {
            console.log("滚了");
        },false);
        */
        //此方法可以用event.preventDefault();来处理
        //但是IE8不能支持此方法
        
        
    };
    </script>
</head>
<body style="height: 2000px;">
    <div id="box1"></div>
</body>
</html>